<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工修改</title>
		<!-- 引入脚本 -->
		<script src="../../js/jquery.js"></script>
		<script src="../../js/common.js"></script>
		<script>
			window.onload=function(){
				//向后端发送请求，得到数据:所有的部门信息和一个员工对象
				$.get(url+"emp/one",{id:obj.getValue2(location.search,"id")},function(data){
					//根据键值对取数据
					let obj=data.one;//假设键名为one,一个员工对象
					let list=data.list;//假设键名为dept,所有部门信息
					//调用部门方法
					getDeptno(list);
					//将对象装入表单控件中
					$("#empno").val(obj.empno);
					$("#ename").val(obj.ename);
					$("#tel").val(obj.tel);
					$("#job").val(obj.job);
					$("#mgr").val(obj.mgr);
					$("#hiredate").val(obj.hiredate);
					$("#sal").val(obj.sal);
					$("#comm").val(obj.comm);
					$("#age").val(obj.age);
					$("#deptno").val(obj.deptno);
					$("#pic2").attr("src",url+"upload/"+obj.epic);
					//设置头像可见
					$("#pic2").css("display","inline-block");
					$("#econtent").text(obj.econtent);
				},"json");
				
			}
				
			function setDate(){
				// 当前日期
				let now=new Date();
				// 取出年
				let year=now.getFullYear();
				// 取出月 padStart第一个参数为位数，第二个参数为填空字符
				let month=String(now.getMonth()+1).padStart(2,'0');
				// 取出天
				let day=String(now.getDate()).padStart(2,'0');
				// document.getElementById("hiredate").value=year+"-"+month+"-"+day;
				$("#hiredate").val(year+"-"+month+"-"+day);
			}
			function getDeptno(list){
				//解析成数组
				let datalist2=list;
				let str=``;
				//第一个参数为数组  第二个参数回调函数
				// $.each(datalist2,function(i,obj){
				// 	str+=`<option value="${obj.deptno}">${obj.dname}</option>`;
				// })
				// for (var i = 0; i < datalist2.length; i++) {
				// 	str+=`<option value="${datalist2[i].deptno}">${datalist2[i].dname}</option>`;
				// }
				//for ...of为增强for循环，循环变量相当于对象
				// for (let obj of datalist2) {
				// 	str+=`<option value="${obj.deptno}">${obj.dname}</option>`;
				// }
				//for...in为增加for循环，循环变量为属性
				for (let i in datalist2) {
					str+=`<option value="${datalist2[i].deptno}">${datalist2[i].dname}</option>`;
				}
				//替换下拉列表框select
				$("#deptno").html(str);
			}
		</script>
	<link  href="../../css/mycss.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<!-- multipart/form-data表单信息以二进制方式编码 -->
		<form action="emplist.html" id="emp" enctype="multipart/form-data">
			<table>
				<tr>
					<td>员工编号</td>
					<td><input type="text" name="empno" id="empno"></td>
					
				</tr>
				<tr>
					<td>员工姓名</td>
					<!-- maxlength为最大长度 -->
					<!-- required表示必选 -->
					<td><input type="text" name="ename" id="ename" maxlength="50" required></td>
					
				</tr>
					<tr>
					<td>员工电话</td>
					<!-- maxlength为最大长度 -->
					<td><input type="tel" name="tel" id="tel" maxlength="11" required></td>
				</tr>
				<tr>
					<td>职位</td>
					<!-- maxlength为最大长度 -->
					<td><input type="text" name="job" id="job" maxlength="50"></td>
				</tr>
				<tr>
					<td>管理者编号</td>
					<!-- min表示最小值 max表示最大值 value表示当前对象的值（类型为string） -->
					<td><input type="number" name="mgr" id="mgr" min="" max="" value="1"></td>
				</tr>
				<tr>
					<td>入职日期</td>
					<!-- 设置当前的系统日期通过脚本设置 -->
					<td><input type="date" name="hiredate" id="hiredate" value="2024-09-01"></td>
				</tr>
				<tr>
					<td>工资</td>
					<td><input type="number" name="sal" id="sal"></td>
				</tr>
				<tr>
					<td>补助</td>
					<td><input type="number" name="comm" id="comm"></td>
				</tr>
				<tr>
					<td>年龄</td>
					<td><input type="number" name="age" id="age"></td>
				</tr>
				<tr>
					<td>部门编号</td>
					<td>
						<!-- 页面加载时，部门编号来源于本地缓存的部门编号 -->
						<select name="deptno" id="deptno">
							<option value="10">技术部</option>
						</select>
					</td>
				<tr>
					<td>头像</td>
				<td>
					<input type="file" name="pic" id="pic" onclick="jiazai()">
					<!-- img展示头像 -->
					<img src="" id="pic2"/>
				</td>
				</tr>
				<tr>
					<td>自我介绍</td>
					<td>
						<textarea name="econtent" id="econtent" cols="30" rows="10">
							内容
							
						</textarea>
					</td>
					<tr>
						<td colspan="2">
							<input type="submit" value="提交" onclick="return tijiao()">
							<input type="reset" value="重置">
						</td>
				</tr>
			</table>
		</form>
		<script>
			function tijiao(){
				//formdata对象
				let data=new FormData(document.getElementById("emp"));
				$.ajax({
					url:url+"emp/update",
					type:"post",
					data:data,
					processData: false,//浏览器不处理数据
					contentType:false,//浏览器不进行编码
					// async:false,//同步，默认为true表示异步
					success:function (data){
						//data为回调数据
						if (data==1){
							alert("成功");
							location.href="emplist.html";
						}else
							alert("失败");
					}
				})
				//阻止表单提交
				return false;
			}
			function jiazai(){
				//获取文件对象
				let pic=document.getElementById("pic");
				let pic2=document.getElementById("pic2");
				if(pic!=null){
					pic.onchange=function(){
						//获取文件字符流
						let f=new FileReader();
						//设置文件来源
						f.readAsDataURL(pic.files[0]);
						f.onload=function(){
							//设置样式可见
							// pic2.style.display="inline-block";
							$("#pic2").css("display","inline-block");
							//result属性为base64字符串 52个字母 10个数字 +/
							// pic2.src=this.result;
							$("#pic2").attr("src",this.result);
						}
						
					}
				}
			}
		</script>
	</body>
</html>